<script setup>
import { map, merge, omit } from 'lodash-es';
import { useRequest, useWatch } from '@/hooks';
import { useSelectIns } from '@/store/zdwh.js';
import { TableList } from '@/components/MainComponents.js';
import { getMeterTypeList, getBindMeterList, bindMeter } from '@/api/index.js';
import { Message, MessageBox } from 'element-ui';

const props = defineProps({
  queryParams: { type: Object, default: () => ({}) },
});
const emit = defineEmits(['success']);
const visible = ref(false);
const selectInsStore = useSelectIns();
const queryData = ref({
  deviceType: null,
  identification: '',
});
const tableRef = ref(null);
const tableData = ref([]);
const columnObj = ref({
  index: true,
  selection: true,
  columnData: [
    { text: true, prop: 'deviceViewId', label: '计量表编号' },
    { text: true, prop: 'deviceName', label: '计量表名称' },
    { text: true, prop: 'deviceTypeName', label: '计量表类型' },
    { text: true, prop: 'position', label: '计量表安装位置' },
    { text: true, prop: 'energyType', label: '计量能源类型' },
    { text: true, prop: 'energyUnit', label: '计量能源单位' },
  ],
});
const deviceCodes = ref([]);

const handleOpen = () => {
  const params = merge({}, omit(props.queryParams, ['pageNum', 'pageSize']), queryData.value);
  runTable(params);
  runMeterType({});
};
const handleSelectionChange = val => {
  deviceCodes.value = map(val, v => v.deviceCode);
};
const cancel = () => {
  tableData.value = [];
  deviceCodes.value = [];
  queryData.value = { deviceType: null, identification: '' };
  visible.value = false;
};
const handleSave = () => {
  MessageBox.confirm('请确认信息无误', '提示', {
    confirmButtonText: '是',
    cancelButtonText: '否',
    type: 'warning',
  }).then(() => {
    const params = merge({}, omit(props.queryParams, ['pageNum', 'pageSize']), { deviceCodes: deviceCodes.value });
    runBind(params);
  });
};

const [meterTypeList, , runMeterType] = useRequest(getMeterTypeList, { manual: true });
const [, loading, runTable] = useRequest(getBindMeterList, {
  manual: true,
  onSuccess: res => {
    if (res.code === 200) {
      tableData.value = res.data ?? [];
      nextTick(() => {
        map(tableData.value, item => {
          tableRef.value.$refs.elTableRef.toggleRowSelection(item, item?.checked || false);
        });
      });
    }
  },
});
const [, , runBind] = useRequest(bindMeter, {
  manual: true,
  onSuccess: res => {
    if (res.code === 200) {
      Message.success(res.msg);
      cancel();
      emit('success', true);
    }
  },
});

defineExpose({ visible });
</script>

<template>
  <el-dialog :visible.sync="visible" width="70%" :before-close="cancel" append-to-body @open="handleOpen">
    <div slot="title" class="dialog-title">
      <span class="tit">
        <span class="u-prim-text">绑定计量表</span>
      </span>
    </div>
    <div class="u-prim-text u-fs16">{{ selectInsStore.selectIns?.enterpriseName ?? '' }}</div>
    <div class="u-mt20 u-mb20">
      <el-select v-model="queryData.deviceType" placeholder="请选择计量表类型" size="small" class="u-mr10" clearable>
        <el-option
          v-for="item in meterTypeList ?? []"
          :key="item.deviceTypeId"
          :label="item.deviceTypeName"
          :value="item.deviceTypeId"
        />
      </el-select>
      <el-input
        v-filter-input
        style="width: 200px; margin-right: 10px"
        v-model.trim="queryData.identification"
        placeholder="请输入计量表ID/名称"
        size="small"
        clearable
      />
      <el-button icon="el-icon-search" type="primary" size="small" @click="handleOpen">查询</el-button>
    </div>
    <TableList
      ref="tableRef"
      v-loading="loading"
      :tableData="tableData"
      :columObj="columnObj"
      row-key="deviceCode"
      :height="400"
      @handleSelectionChange="handleSelectionChange"
    ></TableList>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" size="small" plain @click="cancel">取 消</el-button>
      <el-button type="primary" size="small" @click="handleSave">保 存</el-button>
    </div>
  </el-dialog>
</template>

<style lang="scss" scoped></style>
